import React from "react";
import { Dayjs } from "dayjs";

interface HeaderProps {
  value: Dayjs;
  onChange: (newValue: Dayjs) => void;
}

const Header: React.FC<HeaderProps> = ({ value, onChange }) => {
  const prevMonth = () => {
    onChange(value.subtract(1, "month"));
  };

  const nextMonth = () => {
    onChange(value.add(1, "month"));
  };

  const goToToday = () => {
    // onChange(dayjs()); // 假设你导入了 dayjs
  };

  return (
    <div className="px-4 py-3 border-b border-gray-200">
      <div className="flex items-center justify-between">
        <div className="flex items-center">
          <div
            onClick={prevMonth}
            className="
              w-7 h-7 
              flex items-center justify-center 
              text-gray-700 
              rounded-full 
              cursor-pointer 
              select-none
              hover:bg-gray-200
              transition-colors
              text-xs
              mr-3
            "
          >
            {"<"}
          </div>

          <div className="text-lg font-medium text-gray-900 mx-3">
            {value.format("YYYY 年 MM 月")}
          </div>

          <div
            onClick={nextMonth}
            className="
              w-7 h-7 
              flex items-center justify-center 
              text-gray-700 
              rounded-full 
              cursor-pointer 
              select-none
              hover:bg-gray-200
              transition-colors
              text-xs
              ml-3
            "
          >
            {">"}
          </div>
        </div>

        <button
          onClick={goToToday}
          className="
            bg-gray-100 
            hover:bg-gray-200 
            text-gray-800 
            text-sm 
            font-medium
            px-4 py-1 
            rounded 
            cursor-pointer 
            transition-colors
            border-0
          "
        >
          今天
        </button>
      </div>
    </div>
  );
};

export default Header;
